<template>
  <a-modal :width="700" v-model:visible="showAddGoodsDialog" title="添加在线商品" title-align="start" :mask-closable="false" :on-before-ok="submitData" :ok-loading="submitLoading" @cancel="closedDialog">
    <a-form style="width: 500px" ref="formRef" :model="formInfo" :rules="rulesUser">
      <a-form-item field="shop.sellerId" label="选择店铺">
        <a-select v-model="formInfo.shop" placeholder="请选择" value-key="id" allow-search allow-clear>
          <a-option v-for="(shop, i) in shopList" :key="i" :value="shop" :label="shop.shopName" />
        </a-select>
      </a-form-item>
      <a-form-item field="msku" label="MSKU">
        <a-input v-model="formInfo.msku" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-form-item field="fnSku" label="FNSKU">
        <a-input v-model="formInfo.fnSku" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-form-item field="product.sku" label="SKU">
        <p style="margin-right: 10px">{{ $extract(formInfo.product, 'sku') }}</p>
        <a-button type="primary" size="small" @click="showChooseProductDialog = true">选择产品SKU</a-button>
      </a-form-item>
      <a-form-item label="销售员">
        <a-select v-model="formInfo.saler" placeholder="请选择" value-key="id" allow-search allow-clear>
          <a-option v-for="(user, i) in userList" :key="i" :value="user" :label="user.userName" />
        </a-select>
      </a-form-item>
    </a-form>
    <div class="info-text">
      <p class="title">注意事项</p>
      <p>· 手动添加在线商品应用场景为亚马逊上架之后,ERP系统没有那么快同步到商品信息,可手动创建商品记录.</p>
      <p>· 请务必填写正确的MSKU和FNSKU,确保后续同步过来的数据能匹配成功</p>
    </div>
  </a-modal>
  <ChooseProduct v-if="showChooseProductDialog" title="选择产品SKU" :isShow="showChooseProductDialog" @closed="showChooseProductDialog = false" @success="chooseProduct" />
</template>
<script lang="ts" setup>
  import { ref, PropType } from 'vue'
  import { addAmzProductSale } from '@/api/publish'
  import { Message } from '@arco-design/web-vue'
  import ChooseProduct from './chooseProduct.vue'
  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    shopList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    userList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
  })
  const rulesUser = ref({
    'shop.sellerId': [{ required: true, message: '请选择店铺' }],
    msku: [{ required: true, message: '请输入MSKU' }],
    fnSku: [{ required: true, message: '请输入FNSKU' }],
    'product.sku': [{ required: true, message: '请输入SKU' }],
  })

  const showChooseProductDialog = ref(false)
  const showAddGoodsDialog = ref(props.isShow)
  const formInfo = ref<any>({})
  const formRef = ref()
  const submitLoading = ref(false)

  // 选中产品
  function chooseProduct(product: any) {
    formInfo.value.product = {
      id: product.id,
      sku: product.sku,
      skuName: product.skuName,
    }
    formInfo.value.category = product.category
  }
  // 关闭
  function closedDialog() {
    formInfo.value = {}
    formRef.value.clearValidate()
    showAddGoodsDialog.value = false
    emit('closed')
  }
  // 提交店铺信息
  async function submitData() {
    let valid = await formRef.value.validate((valid: any) => {
      return valid
    })
    if (valid) return false
    let _param: any = {
      fnSku: formInfo.value.fnSku,
      msku: formInfo.value.msku,
      product: formInfo.value.product,
      sellerId: formInfo.value.shop?.sellerId,
      marketplaceId: formInfo.value.shop?.marketplaceId,
      shopName: formInfo.value.shop?.shopName,
    }
    if (formInfo.value.saler?.id) {
      _param.saler = {
        id: formInfo.value.saler?.id,
        name: formInfo.value.saler?.userName,
      }
    }
    if (formInfo.value.category) {
      _param.category = formInfo.value.category
    }
    const res: any = await addAmzProductSale(_param)
    if (res) {
      Message.success('创建成功')
      emit('success')
      closedDialog()
      return true
    }
    return false
  }
</script>
<style lang="less" scoped>
  .info-text {
    padding-left: 20px;
    font-size: 12px;
    color: #999;
    .title {
      margin-bottom: 10px;
    }
  }
</style>
